<template>
	<button class="aui-btn" :class="classes" :disabled="disabled" :style="style" @click="onClick">
		{{text}}<slot></slot>
	</button>
</template>

<script>
export default {
	props: {
		type: {
			default: 'default'
		},
		disabled: Boolean,
		mini: Boolean,
		plain: Boolean,
		text: String,
		style: {
			type: Object,
			default(){
				return {}
			}
		}
	},
	computed: {
		classes () {
		  	return [
				{
					'aui-btn--disabled': this.disabled,
					'aui-btn--mini': this.mini
				},
				`aui-btn--${this.type}`,
				this.plain ? `aui-btn--${this.type}--plain` : ''
		  	]
		}
	},
	methods: {
		onClick() {
			this.$emit("on-click");
		}
	}
}
</script>

<style scoped lang="scss">
	@import "../../styles/components/xbutton/index.scss";
</style>
